<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="tp-box">
    <a-drawer
      :visible="vvvvprops.vvvisible"
      :width="vvvvprops.width"
      :loadding="vvvvprops.loadding"
      :closable="vvvvprops.vclosable"
      :destroyOnClose="vvvvprops.vdestroyOnClose"
      @close="handleVillageDetailClose"
    >
      <template #title>
        <div class="title-detail">
          <Tooltip placement="top">
            <h3>{{ getTitle }}</h3>
          </Tooltip>
        </div>
      </template>
      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <Row ref="mapviewRef">
        <Col :span="24">
          <div class="card-container">
            <a-tabs v-model:activeKey="activeKey" type="card">
              <a-tab-pane key="1" tab="房屋基本信息">
                <Spin :spinning="loading" />
                <a-descriptions
                  title=""
                  bordered
                  v-for="item in houseInfo"
                  :key="item"
                  class="custom-descriptions"
                >
                  <a-descriptions-item style="width: 240px" label="户主姓名" :span="2">{{
                    item.hzxm
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="房屋编号" :span="2">{{
                    item.fwbh
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="总居住人数(人)" :span="2">{{
                    item.jzrks
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="租住人数(人)" :span="2">{{
                    item.zzrs
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="房屋层数(层)" :span="2">{{
                    item.cs
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="房间数量(个)" :span="2">{{
                    item.fjsl
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="出租房间数量(个)" :span="2">{{
                    item.jzfjs
                  }}</a-descriptions-item>
                  <a-descriptions-item
                    style="width: 340px"
                    label="房屋首层现有安全出口的数量 (个)"
                    :span="2"
                    >{{ item.jzscxyaqcksl }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 300px"
                    label="房屋现有疏散楼梯的数量(个)"
                    :span="2"
                    >{{ item.jzxyssltsl }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="房屋首层面积 (平方米)"
                    :span="2"
                    >{{ item.jzscmj }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 300px"
                    label="窗口防护网、广告牌、铁栅栏数量 (个)"
                    :span="2"
                    >{{ item.ckfhwggptzlsl }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 320px"
                    label="本房屋居住人员的电动自行车数量(辆)"
                    :span="2"
                    >{{ item.bdfwjzrydddzxcsl }}</a-descriptions-item
                  >
                  <a-descriptions-item style="width: 240px" label="灭火器数量(个)" :span="2">{{
                    item.mhqsl
                  }}</a-descriptions-item>
                  <a-descriptions-item
                    style="width: 240px"
                    label="防烟逃生面罩数量(套）"
                    :span="2"
                    >{{ item.fytsmz }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="悬挂固定警示标牌数量(张)"
                    :span="2"
                    >{{ item.xggdjsbp }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="房屋简易喷头数量(个)"
                    :span="2"
                    >{{ item.jzszlwxdlgybjqs }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="房屋烟感报警器数量(个)"
                    :span="2"
                    >{{ item.wdwhjgfjgqsyyrkrgbdj }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建"
                    :span="2"
                    >{{ item.sstdsyyrkrclzx }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="疏散通道使用易燃可燃材料装修"
                    :span="2"
                    >{{ item.yhzt }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等"
                    :span="2"
                    >{{ item.gryssdcsszblyyqksddp }}</a-descriptions-item
                  >
                  <a-descriptions-item
                    style="width: 240px"
                    label="除居住外是否存在其他经营业态"
                    :span="2"
                    >{{ item.cjzwqtjyytmsg }}</a-descriptions-item
                  >
                  <a-descriptions-item style="width: 240px" label="建设人员疏散通道" :span="2">{{
                    item.jsrysstd
                  }}</a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="人员疏散通道是否达标" :span="2">
                    {{ getDb(item) }}</a-descriptions-item
                  >
                  <a-descriptions-item style="width: 240px" label="隐患状态" :span="2">{{
                    getPczt(item.pczt)
                  }}</a-descriptions-item>

                  <a-descriptions-item style="width: 240px" :label="labelname" :span="1">{{
                    item.pcsj
                  }}</a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
              <a-tab-pane key="2" tab="隐患信息">
                <a-descriptions title="" bordered v-for="item in houseInfo" :key="item">
                  <a-descriptions-item
                    style="width: 300px"
                    label="电动自行车、电动平衡车及其蓄电池在室内及安全出口处停放、充电"
                    :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.use_electric_bicycle) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.use_electric_bicycle_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item
                    style="width: 300px"
                    label="在公共区域、租住房间内、地下室使用瓶装液化石油气"
                    :span="4"
                  >
                    <div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.use_bottled_liquefied_gas) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.use_bottled_liquefied_gas_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item
                    style="width: 300px"
                    label="疏散走道、楼梯间、安全出口处堆放物品影响人员疏散"
                    :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.use_stacked_items) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.use_stacked_items_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 300px" label="私拉乱接电线" :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.slljdx) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.slljdx_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 300px" label="灭火器未保持完好有效" :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.mhqwbcwhyx) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.mhqwbcwhyx_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                    /></div>
                  </a-descriptions-item>
                  <a-descriptions-item
                    style="width: 300px"
                    label="简易喷淋灭火系统未保持完好有效"
                    :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.jyplmhxtwbcwhyx) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.jyplmhxtwbcwhyx_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      /> </div
                  ></a-descriptions-item>
                  <a-descriptions-item
                    style="width: 300px"
                    label="烟感报警器未保持完好有效"
                    :span="4"
                    ><div :class="itemtitle" style="margin: 13px 12px; float: left"
                      ><span>{{ getVal(item.ygbjwfwhyx) }}</span></div
                    >
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in photoInfo.ygbjwfwhyx_photo_list"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                  <a-descriptions-item label="户主签字" :span="4">
                    <a-image
                      :src="item.sign"
                      style="width: 300px; height: 80px"
                      @click="visible = true"
                    />
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
              <a-tab-pane key="3" tab="整改信息">
                <a-descriptions v-for="item in rectification" :key="item" title="" bordered>
                  <a-descriptions-item style="width: 240px" label="隐患类型" :span="3">
                    {{ item.check_name }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改时间" :span="3">
                    {{ item.zg_time }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改人" :span="3">
                    {{ item.zg_name }}
                  </a-descriptions-item>
                  <a-descriptions-item style="width: 240px" label="整改照片" :span="3">
                    <div
                      style="width: 50px; height: 50px; float: left; margin-right: 10px"
                      v-for="pic in picdata"
                      :key="pic"
                    >
                      <a-image
                        :src="pic"
                        style="width: 50px; height: 50px; border-radius: 50px"
                        @click="visible = true"
                      />
                    </div>
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
            </a-tabs>
          </div>
        </Col>
      </Row>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip, Row, Col, Spin } from 'ant-design-vue';
  import { ref, computed, onMounted, watch } from 'vue';
  import { housrDetailApi, getCheckHousrDetailApi, getHcHousrDetailApi } from '/@/api/demo/table';
  const visible = ref(false);
  const loading = ref(false); //加载
  // 默认传过来的值q
  const vvvvprops = defineProps({
    vvvisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    vclosable: {
      type: Boolean,
      default: true,
    },
    loadding: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    detailParams: {
      type: Object,
      default: () => {},
    },
    vvvvcurrentXzqdmname: {
      type: String,
      default: '',
    },
    currentTitle: {
      type: Object,
      default: () => {},
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    vdestroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
    pid: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    hid: {
      type: String,
      default: '',
    },
    chk: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: '',
    },
  });
  let houseInfo = ref<any>([]);
  let photoInfo = ref<any>([]);
  let rectification = ref<any>({});
  let picdata = ref<any>([]);
  let activeKey = ref('1');
  let itemtitle = ref('');
  const vvvvisible = ref(true);
  const labelname = ref('自查时间');
  const getTitle = computed(() => {
    var title_name = '';
    if (vvvvprops.currentTitle.category == '自查') {
      title_name = '自查';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '自查时间';
    } else if (vvvvprops.currentTitle.category == '检查') {
      title_name = '检查';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '检查时间';
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      title_name = '乡镇核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      title_name = '区级核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      title_name = '市级核验';
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      labelname.value = '核验时间';
    }

    let str = `${vvvvprops.currentTitle.title}的` + title_name + `情况`;
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    loading.value = true;
    if (vvvvprops.currentTitle.category == '自查') {
      getDataInfo(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '检查') {
      getCheckHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      getJzHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      getQjHousData(vvvvprops.currentTitle.id);
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      getSjHousData(vvvvprops.currentTitle.id);
    }
    // eslint-disable-next-line vue/no-async-in-computed-properties
    setTimeout(() => {
      loading.value = false;
    }, 3000);
    return str;
  });
  const getDataInfo = async (id) => {
    housrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getCheckHousData = async (id) => {
    getCheckHousrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getJzHousData = async (id) => {
    console.log('街镇', id);
    getHcHousrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getQjHousData = async (id) => {
    getHcHousrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getSjHousData = async (id) => {
    getHcHousrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList;
        photoInfo.value = d.photoList[0];
        console.log('隐患信息', photoInfo.value);
        rectification.value = d.rectificationYhList;
        //getImgList();
        let imgs = rectification.value[0];
        if (imgs != null) {
          const list: any = imgs.zg_zp;
          const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
          if (piclist != '') {
            if (piclist.includes(',')) {
              picdata.value = imgs.zg_zp.split(',');
            } else {
              picdata.value.push(piclist + '?t=' + new Date());
            }
          }
        }
        //getImgList();
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };
  const getVal = (val) => {
    var t = '';

    if (val == '1') {
      t = '是';
      itemtitle.value = 'ant-tag ant-tag-red';
    } else if (val == '2') {
      t = '不涉及';
      itemtitle.value = 'ant-tag  ant-tag-green';
    } else if (val == '0') {
      t = '否';
      itemtitle.value = 'ant-tag ant-tag-green';
    }
    return t;
  };
  const getPczt = (val) => {
    var str = '';
    var lable_name = '';
    if (vvvvprops.currentTitle.category == '自查') {
      lable_name = '已自查';
    } else if (vvvvprops.currentTitle.category == '检查') {
      lable_name = '已检查';
    } else {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
      lable_name = '已核验';
    }
    if (val == '20') {
      str = '' + lable_name + '无隐患';
    } else if (val == '21') {
      str = '' + lable_name + '有隐患';
    }
    return str;
  };

  const getDb = (item) => {
    var lable_name = '';
    if (vvvvprops.currentTitle.category == '自查') {
      lable_name = item.tdsfdb;
    } else if (vvvvprops.currentTitle.category == '检查') {
      lable_name = item.jsrysstd;
    } else if (vvvvprops.currentTitle.category == '乡镇核验') {
      lable_name = item.jsrysstd;
    } else if (vvvvprops.currentTitle.category == '区级核验') {
      lable_name = item.jsrysstd;
    } else if (vvvvprops.currentTitle.category == '市级核验') {
      lable_name = item.jsrysstd;
    }
    return lable_name;
  };
  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  const handleVillageDetailClose = () => {
    vvvvisible.value = false;
    emit('close');
    picdata.value = [];
    houseInfo.value = [];
    photoInfo.value = [];
    activeKey.value = '1';
    console.log('************8vvisible*************', vvvvisible.value);
  };
  watch(activeKey, () => {
    if (activeKey.value == '3') {
      console.log('当前选中的标签的 key:', activeKey.value);
      //getImgList();
    }
    //  console.log('当前选中的标签的 key:', activeKey.value);
  });
  onMounted(() => {
    console.log('******详细*初始化*****', vvvvprops);
    //  getDataInfo(vvvvprops.vvvvcurrentTitle.id,);
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
<style>
  .ant-descriptions-bordered .ant-descriptions-item-label,
  .ant-descriptions-bordered .ant-descriptions-item-content {
    padding: 10px 10px !important;
  }
</style>
